<template>
    <div id="profile">
      <v-touch v-on:swipeleft="swiperleft"  v-on:swiperight="swiperright" class="wrapper"  style="touch-action: pan-y!important;">
        <!--头部-->
       <div id="header">
        <div id="notLogin-icon">
          <div>
            <img @click="clickLogin" src="../../assets/imgs/profile/头像.png" alt="">
            <img @click="clickLogin" v-if="!$store.state.isLogin" id="login-icon" src="../../assets/imgs/profile/login.png" alt="">
            <div v-else>{{$store.state.phone}}</div>
          </div>
          <img src="../../assets/imgs/profile/qiandao.png" alt="">
        </div>
      </div>
       <!--漫币，卡券包，月票部分-->
       <div id="card-bar">
        <div class="card-bar-item">
          <div><img src="../../assets/imgs/profile/bi.png" alt="">漫币</div>
          <div>
            <div class="card-bar-item-txt">首充奖励</div>
          </div>
        </div>
        <div class="card-bar-item">
          <div><img src="../../assets/imgs/profile/kaquanbao.png" alt="">卡券包</div>
          <div>
            <div class="card-bar-item-txt">{{cardBar}}</div>
          </div>
        </div>
        <div class="card-bar-item">
          <div><img src="../../assets/imgs/profile/yuepiao.png" alt="">月票</div>
          <div>
            {{monthlyPass}}
          </div>
        </div>
      </div>
        <!--版本更新图片-->
        <img id="updata-icon" src="../../assets/imgs/profile/genxin.png" alt="">
        <!--中间部分导航-->
       <div id="content-nav">
        <div>
          <img src="../../assets/imgs/profile/xiaoxi.png" alt="">
          我的消息
        </div>
        <div>
          <img src="../../assets/imgs/profile/jifen.png" alt="">
          积分商城
        </div>
        <div>
          <img src="../../assets/imgs/profile/yigou.png" alt="">
          已购漫画
        </div>
        <div>
          <img src="../../assets/imgs/profile/huodong.png" alt="">
          活动中心
        </div>
      </div>
       <!--设置项部分-->
       <div id="set-item">
        <div>
          <img src="../../assets/imgs/profile/goumai.png" alt="">
          <div>自动购买管理</div>
          <img src="../../assets/imgs/profile/箭头.png" alt="">
        </div>
        <div>
          <img src="../../assets/imgs/profile/liulianka.png" alt="">
          <div>看漫画免流量</div>
          <img src="../../assets/imgs/profile/箭头.png" alt="">
        </div>
        <div>
          <img src="../../assets/imgs/profile/shezhi.png" alt="">
          <div>设置</div>
          <img src="../../assets/imgs/profile/箭头.png" alt="">
        </div>
        <div>
          <img src="../../assets/imgs/profile/help.png" alt="">
          <div>帮助中心</div>
          <img src="../../assets/imgs/profile/箭头.png" alt="">
        </div>
        <div>
          <img src="../../assets/imgs/profile/fankui.png" alt="">
          <div>建议反馈</div>
          <img src="../../assets/imgs/profile/箭头.png" alt="">
        </div>
      </div>
        <!--新人礼包-->
        <img id="new-gift-bag" src="../../assets/imgs/profile/libao.png" alt="">
      </v-touch>
    </div>
</template>

<script>
    export default {
      name: "Profile",
      data() {
        return {
          monthlyPass: 0,
          cardBarTxt:'登录领券',
          cardNum:5
        }
      },
      computed:{
        cardBar(){  //登录改变cardBarTxt
          return this.$store.state.isLogin? this.cardNum : this.cardBarTxt
        }
      },
      methods: {
        swiperleft: function () {
        },
        swiperright: function () {
          this.$router.push({'path': 'bookrack'});
        },
        clickLogin() {    //点击登录
          if(!this.$store.state.isLogin){
            this.$router.replace('/login')
          }

        }
      }
    }
</script>

<style scoped>
@import "../../assets/css/profile/profile.css";
</style>
